import React, { useState } from 'react';
import '@/pages/account/Business/indexRoom.less';
import { ModalForm, ProFormInstance, ProFormText } from '@ant-design/pro-components';
import { useAsyncEffect } from 'ahooks';
import { useRef } from 'react';
import { useIntl } from '@umijs/max';
import { CleanCard, Read_Card } from '@/utils/Send';
import { message } from 'antd';
interface Prpos {
  useflag: boolean;
  handleOkFlag: any;
  useMsg: any;
  setsendMsg: any;
  setType: any;
  cardType: string;
}
const UserMsgModel: React.FC<Prpos> = ({
  useflag,
  handleOkFlag,
  useMsg,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  setsendMsg,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  setType,
  cardType,
}) => {
  const formRef = useRef<ProFormInstance>(null);

  const intl = useIntl();
  const getname = async () => {
    console.log('useMsg', useMsg);

    if (useMsg.hasOwnProperty('cmdInfo')) {
      setsetCardflag(false);
      let data = JSON.parse(useMsg.cmdInfo);
      console.log(useMsg);

      if (
        (data.cardclass !== 'guestcard' && cardType === '管理卡') ||
        cardType == 'Management card'
      ) {
        console.log('data1');
        formRef.current?.setFieldsValue({
          time: useMsg.expirationDate,
          realName: useMsg.cardHolder,
          cardNum: useMsg.cardNum,
        });
        if (data.cardclass === 'buildingcard') {
          formRef.current?.setFieldsValue({
            cardType: `${intl.formatMessage({ id: 'card.Building card' })} (${useMsg.buildingName})`,
          });
        }
        if (data.cardclass === 'floorcard') {
          formRef.current?.setFieldsValue({
            cardType: `${intl.formatMessage({ id: 'card.Layer control card' })} (${useMsg.floor})`,
          });
        }
        if (data.cardclass === 'emergencycard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Emergency card' }),
          });
        }
        if (data.cardclass === 'staffcard') {
          formRef.current?.setFieldsValue({
            cardType: `${intl.formatMessage({ id: 'card.Hygiene card' })} (${useMsg.floor})`,
          });
        }
        if (data.cardclass === 'alwaysopencard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Always-on card' }),
          });
        }
        if (data.cardclass === 'setvipcard') {
          formRef.current?.setFieldsValue({
            cardType: `${intl.formatMessage({ id: 'card.Authorization card' })} (${data.groupid + intl.formatMessage({ id: 'card.minute' })})`,
          });
        }
        if (data.cardclass === 'mastercard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Total card' }),
          });
        }
        if (data.cardclass === 'personnelcard') {
          formRef.current?.setFieldsValue({
            cardType: `${intl.formatMessage({ id: 'card.Employee card' })} (${useMsg.floor})`,
          });
        }
        if (data.cardclass === 'Elevatorcard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Access control card' }),
          });
        }
      } else if (
        (data.cardclass === 'guestcard' && cardType === '客人卡') ||
        cardType == 'Guest Card'
      ) {
        console.log('data2', useMsg.checkin);
        formRef.current?.setFieldsValue({
          time: `${useMsg.checkin} - ${useMsg.checkout}`,
          roomNo: `${useMsg.roomName} (${useMsg.roomTypeName})`,
          realName: useMsg.realName,
          phone: useMsg.mobile,
        });
      } else {
        console.log('data3');
        formRef.current?.setFieldsValue({
          time: useMsg.expirationDate,
          realName: useMsg.cardHolder,
          cardNum: useMsg.cardNum,
        });
        if (data.losscardclass === 'guestcard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Guest Card' }),
          });
        }
        if (data.losscardclass === 'buildingcard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Building card' }),
          });
        }
        if (data.losscardclass === 'floorcard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Layer control card' }),
          });
        }
        if (data.losscardclass === 'emergencycard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Emergency card' }),
          });
        }
        if (data.losscardclass === 'staffcard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Hygiene card' }),
          });
        }
        if (data.losscardclass === 'alwaysopencard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Always-on card' }),
          });
        }
        if (data.losscardclass === 'setvipcard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Authorization card' }),
          });
        }
        if (data.losscardclass === 'mastercard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Total card' }),
          });
        }
        if (data.losscardclass === 'personnelcard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Employee card' }),
          });
        }
        if (data.cardclass === 'Elevatorcard') {
          formRef.current?.setFieldsValue({
            cardType: intl.formatMessage({ id: 'card.Access control card' }),
          });
        }
      }
    } else {
      console.log('判断', useMsg);
      setsetCardflag(true);
      formRef.current?.setFieldsValue({
        time: `${useMsg.setlocktime}`,
        cardNum: useMsg.cardid,
      });
      formRef.current?.setFieldsValue({
        cardType: intl.formatMessage({ id: 'card.Update settings card' }),
        realName: localStorage.getItem('setcardType'),
      });
    }
  };

  const [setCardflag, setsetCardflag] = useState(false);
  useAsyncEffect((): any => {
    getname();
  }, []);

  const formItemLayout = {
    labelCol: { span: 8 },
  };

  const onFinish = async () => {
    let res = await CleanCard();
    res.result == 0 ? message.success(intl.formatMessage({id:"ManageCards.return successful"})) : message.error(intl.formatMessage({id:"ManageCards.return failed"}));
    handleOkFlag(false);
  };


  return (
    <ModalForm
      {...formItemLayout}
      layout={'vertical'}
      formRef={formRef}
      open={useflag}
      title={cardType}
      readonly
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => {
          handleOkFlag(false);
        },
      }}
      submitter={{
        // 配置按钮的属性
        resetButtonProps: {
          style: {
            // 隐藏重置按钮
            display: 'none',
          },
        },
        submitButtonProps: {},
        searchConfig: {
          submitText: intl.formatMessage({id:"Lost.Return card"}),
          resetText: '取消',
        },
      }}
      submitTimeout={2000}
      onFinish={onFinish}
      width={'600px'}
    >
      <div style={{ marginTop: '40px' }}></div>

      {cardType === '客人卡' || cardType === 'Guest Card' ? (
        <>
          <ProFormText
            width="md"
            name="time"
            label={
              <h4 style={{ fontWeight: 'bold' }}>
                {intl.formatMessage({ id: 'business.Check-in time' })}/
                {intl.formatMessage({ id: 'business.Check-out time' })}:
              </h4>
            }
          />
          <ProFormText
            width="md"
            name="roomNo"
            label={
              <h4 style={{ fontWeight: 'bold' }}>
                {intl.formatMessage({ id: 'business.Room number' })}:
              </h4>
            }
          />
          <ProFormText
            width="md"
            name="realName"
            label={
              <h4 style={{ fontWeight: 'bold' }}>
                {intl.formatMessage({ id: 'business.Occupants' })}:
              </h4>
            }
          />
          <ProFormText
            width="md"
            name="phone"
            label={
              <h4 style={{ fontWeight: 'bold' }}>
                {intl.formatMessage({ id: 'business.Mobile' })}
              </h4>
            }
          />
        </>
      ) : (
        <>
          <ProFormText
            width="md"
            name="time"
            label={
              <h4 style={{ fontWeight: 'bold' }}>
                {setCardflag
                  ? intl.formatMessage({ id: 'business.In-card time' })
                  : intl.formatMessage({ id: 'business.expiration date' })}{' '}
                :
              </h4>
            }
          />

          <ProFormText
            width="md"
            name="realName"
            label={
              <h4 style={{ fontWeight: 'bold' }}>
                {setCardflag
                  ? intl.formatMessage({ id: 'business.Set card type' })
                  : intl.formatMessage({ id: 'business.Name' })}{' '}
                :
              </h4>
            }
          />

          <ProFormText
            width="md"
            name="cardNum"
            label={
              <h4 style={{ fontWeight: 'bold' }}>{intl.formatMessage({ id: 'card.number' })}:</h4>
            }
          />
          <ProFormText
            width="md"
            name="cardType"
            label={
              <h4 style={{ fontWeight: 'bold' }}>
                {intl.formatMessage({ id: 'card.Card type' })} :
              </h4>
            }
          />
        </>
      )}
    </ModalForm>
  );
};

export default UserMsgModel;
